<template>
    <div>
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <card header-text="设备数据实时显示" style="text-align: left; width: 90%; font-size:18pt;overflow: scroll;" id="table1">
                    <div class="fixed-table-body">
                        <div style="text-align: left;">
                            <!-- 增加按钮，调用doShow方法 -->
                            <button @click="refresh" style="font-size: 12pt;">刷新</button>
                        </div>
                        <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                               data-operate-edit="" data-operate-del="" width="100%">
                            <thead>
                            <!-- <tr>
                                <th style="text-align: center; vertical-align: middle; font-size:18pt;" data-field="operate" width="300">
                                    <div class="th-inner ">设备实时数据</div>
                                    <div class="fht-cell"></div>
                                </th>
                            </tr> -->
                            </thead>
                            <tbody data-listidx="0">
                            <tr data-index="0">
                                <td style="text-align: left; vertical-align: top;font-size: 11pt;">
                                    <!-- 以v-html展示数据 -->
                                    <div v-html="valueShow"></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </card>
            </div>
        </div>
    </div>
</template>

<script>
    import { onMounted, reactive, ref } from "vue";
    import axios from "axios";

    export default {
        data() {
            return {
                formdata: {
                    stationId: null,
                    temperature: null,
                },
                addDialogVisible: false,
                editDialogVisible:false,
                valueShow: null
            };
        },
        async mounted() {
            var table1 = document.getElementById("table1")
            if (table1 !== undefined && table1 !== null)
            {
                table1.style.width = (parseInt(document.body.clientWidth) - 250) + "px";
            }
            else
            {
                console.info('not found');
            }

            this.refresh();
            //开启定时任务
            setInterval(this.refresh, 60000);
        },
        methods: {
            queryData(stationId) {
                //请求restapi，获取数据
                axios.get(`http://101.201.68.169:8888/v1/real_data/stations/${stationId}`)
                // axios.get(`http://127.0.0.1:8887/v1/real_data/stations/${stationId}`)
                    .then(response => {
                        // 处理返回的数据
                        
                        // 更新表格数据
                        this.showValue(response.data);
                    })
                    .catch(error => {
                        // 处理请求错误
                        console.error(error);
                    });
            },
            refresh() {
                this.queryData('zhongtie_jieneng_id_00001');
            },

            showValue(responseData) {
                let valueJSON = JSON.parse(responseData.datas[0].value);
                let dataTime = responseData.datas[0].created_time;
                //把字段解析出来，并以  字段：值的形式组成字符串
                let valueStr = '';
                let num = 0;
                for (let key in valueJSON) {
                    if (key === 'originalData') {
                        continue;
                    }

                    if(num % 1 == 0)
                        valueStr += key + ':' + valueJSON[key] + '<br/>&nbsp;&nbsp;&nbsp;';
                    else
                        valueStr += key + ':' + valueJSON[key] + '&nbsp;&nbsp;&nbsp;';

                    num++;
                }

                this.valueShow = "数据采集时间：" + dataTime + "<br/>" + valueStr;
            }
        }
    }
</script>

<style lang="scss">
    .table thead tr {
        color: #007bff;
    }

    .error-icon {
        color: #e34a4a;
    }

    .success-icon {
        display: inline-block;
        color: #4ae387;
    }

    .table-sm th, .table-sm td {
        padding: .7rem;
    }

    .color-icon-label-table {
        td:first-child {
            width: 1rem;
        }
    }
</style>
<style lang="css" media="all">
    @import "../assets/css/EFMenuCss.css";
    @import "../assets/css/MasterCss.css";
    @import "../assets/css/StationNowDataViewCss.css";

    .btn {
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent;
    }
    .btn-xs, .btn-group-xs > .btn {
        padding: 1px 5px;
        font-size: 11px;
        line-height: 1.5;
        border-radius: 2px;
        color:white;
    }
    .btn-primary {
        color: #fff;
        background-color: #2c3e50;
        border-color: #2c3e50;
    }
    .btn {
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 12px;
        line-height: 1.42857143;
        border-radius: 3px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    a {
        color: #d2d6de;
    }
    a {
        color: #2c3e50;
        text-decoration: none;
    }
    a {
        background-color: transparent;
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    user agent stylesheet
    a:-webkit-any-link {
        color: -webkit-link;
        cursor: pointer;
        text-decoration: underline;
    }
    style attribute {
        text-align: center;
        vertical-align: middle;
    }
    table.table-nowrap tbody > tr > td, table.table-nowrap thead > tr > th {
        white-space: nowrap;
    }
    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 1px solid #ddd;
    }
    .bootstrap-table .table {
        margin-bottom: 0!important;
        border-bottom: 1px solid #ddd;
        border-collapse: collapse!important;
        border-radius: 1px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    table {
        border-collapse: separate;
        text-indent: initial;
        border-spacing: 2px;
    }
    body {
        background: #2828FF;
        font-size: 13px;
        color: #fff;
    }
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
        font-weight: 400;
        overflow-x: hidden;
        overflow-y: auto;
    }
    body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 12px;
        line-height: 1.42857143;
        color: #333333;
        background-color: #fff;
    }
    html {
        font-size: 10px;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    html {
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
    *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .el-form-item{
        margin-bottom: 0px;
    }
</style>